<template>
  <div class="submitATool mt-6">
    <div class="rounded-lg px-4 pt-6 pb-7 box-shadow">
      <h3 class="text-2xl text-gray-1000 font-semibold text-center">
        {{$t('submit_letsWorkTogether')}}
      </h3>
      <div class="max-w-3xl mx-auto mt-7">
        <div class="space-y-3">
          <div class="border border-gray-1600 rounded-sm py-5 px-6">
            <h3 class="text-lg text-gray-1000 font-semibold">{{$t('submit_seoArticle')}}</h3>
            <p class="text-base text-gray-1500">{{$t('submit_youCanContactUsToPublish')}}</p>
          </div>
          <div class="border border-gray-1600 rounded-sm py-5 px-6">
            <h3 class="text-lg text-gray-1000 font-semibold">{{$t('submit_linkExchange')}}</h3>
            <p class="text-base text-gray-1500">{{$t('submit_youCanLinkExchange')}}</p>
          </div>
          <div class="border border-gray-1600 rounded-sm py-5 px-6">
            <h3 class="text-lg text-gray-1000 font-semibold">{{$t('submit_youtubeOrTwitter')}}</h3>
            <p class="text-base text-gray-1500">{{$t('submit_weCanBeContactedToLaunch')}}</p>
          </div>
          <div class="border border-gray-1600 rounded-sm py-5 px-6">
            <h3 class="text-lg text-gray-1000 font-semibold">{{$t('submit_dataPurchase')}}</h3>
            <p class="text-base text-gray-1500">{{$t('submit_youCanContactUsFor')}}</p>
          </div>
          <div class="border border-gray-1600 rounded-sm py-5 px-6">
            <h3 class="text-lg text-gray-1000 font-semibold">{{$t('submit_moreCooperation')}}</h3>
            <p class="text-base text-gray-1500">{{$t('submit_wantToSponsorUs')}}</p>
          </div>
        </div>
        <div class="flex justify-between items-center bg-gray-2600 px-4 sm:px-14 py-6 submit-ctrl gap-4 flex-wrap mt-6 rounded-sm">
          <div class="flex-shrink-0 text-lg text-gray-1500"
            v-html="$t('submit_contactUs')">
          </div>

          <a href="mailto:business@toolify.ai"
            class="flex-shrink-0 w-full sm:w-auto border border-purple-1300 bg-purple-1300 px-5 py-1.5 text-base text-white rounded hover:bg-purple-1400 hover:border-purple-1400">
            {{$t('submit_getInTouch')}}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'SubmitBusiness',
  props: {},
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
.submitATool {
  .box-shadow {
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.06);
  }
  .el-button-group {
    .el-button {
      font-size: 16px;
      color: #191919;
      background: none;
      &:hover {
        border-color: #7150e6;
        background: none;
        color: #7150e6;
      }
      &.actived {
        border-color: #7150e6;
        background: none;
        color: #7150e6;
        z-index: 1;
      }
    }
  }
  .el-form {
    .el-form-item {
      margin-bottom: 24px;
      .el-form-item__label {
        font-size: 16px;
        font-weight: bold;
        color: #191919;
        line-height: 21px;
        padding-bottom: 14px;
      }
    }
  }
  .submit-ctrl {
    .el-button {
      font-size: 16px;
      max-width: 100%;
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}
</style>
